<template>
  <div class="mont-right">
    <div class="eq-right-top">
      <div class="eq-right-top-title">
        <img src="../../../assets/images/home-page/eq-right.png" alt="" />
        监测/监控
      </div>
      <div class="eq-right-top-item">
        <div class="tab-switcher">
          <div class="tab-swit-box">
            <img src="../../../assets/images/home-page/m-left.png" alt="" />
            <div class="tab-headers">
              <div
                class="button"
                v-for="(tab, index) in tabs"
                :key="index"
                :class="{ active: activeIndex === index }"
                @click="switchTab(tab, index)"
              >
                {{ tab.attrGroupName }}
              </div>
            </div>
            <img src="../../../assets/images/home-page/m-right.png" alt="" />
          </div>

          <div class="tab-content">
            <div class="tab-i-content">
              <div v-for="(item, index) in contentList" class="tab-i-c-box">
                <span class="tab-lab">{{ item.atrrName }}</span>
                <span class="tab-value"> {{ item.pointVal + item.attrUnit }}</span>
              </div>
            </div>
            <div class="tab-i-btn-box">
              <div></div>
              <div class="tab-i-btn" @click="canGive"> 生成图表 </div>
            </div>
          </div>
        </div>
        <!-- <div class="mont-right-bottom">
          <div class="i-r-b-box">
            <div class="eq-r-t-i-title">
              <span class="eq-dio"></span>
              <span class="eq-d-title">视频</span>
            </div>
            <div class="tab-i-btn-box">
              <div></div>
              <div class="tab-i-btn" @click="canChange"> 相机列表 </div>
            </div>
            <div class="tab-headers">
              <img @click="switchData(-1)" src="../../../assets/images/home-page/m-left.png" alt="" />
              <div class="buttons">
                {{ currentItem.videoName }}
              </div>
              <img @click="switchData(1)" src="../../../assets/images/home-page/m-right.png" alt="" />
            </div>
            <div class="video-box">
              <NcVideoPlayer ref="myNodeClick" />
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, computed, nextTick } from 'vue';
  import { getDevicePointDetail, busVideo } from '@/api/auth/ledger.js';
  import NcVideoPlayer from '@/views/home/components/video/NcVideoPlayer.vue';
  import { tagsStore } from '@/stores';
  const authNav = tagsStore();
  const props = defineProps(['tabs', 'groupType']);
  const emit = defineEmits();
  const activeIndex = ref(0); // 默认显示第一个选项卡
  const contentList = ref([]);
  const videoBoj = ref([{ id: 1, videoName: '视频1' }]);
  const videoBojct = ref({});
  const myNodeClick = ref(null);
  const currentIndex = ref(0);
  const currentItem = computed(() => {
    return videoBoj.value[currentIndex.value] || { videoName: '默认视频名称' };
  });
  const paramsVideo = ref({
    deviceCode: ''
  });
  const params = ref({
    attrGroupName: '',
    deviceCode: '',
    groupType: 0
  });
  const devicePointDetail = (tab) => {
    params.value.attrGroupName = tab.attrGroupName;
    params.value.deviceCode = tab.deviceCode;
    params.value.groupType = props.groupType;
    getDevicePointDetail(params.value).then((res) => {
      console.log('res', res);
      contentList.value = res.data;
    });
  };
  const canChange = () => {
    console.log('生成图表');
    emit('canChange');
  };
  const canGive = () => {
    emit('canGive');
  };
  const getBusVideo = () => {
    paramsVideo.value.deviceCode = authNav.deviceCode;
    busVideo(paramsVideo.value).then((res) => {
      videoBoj.value = res.data.data;
      videoBojct.value = res.data.data[0];
      console.log('已切换到新数据:', videoBoj.value); // 打印当前项以验证
      if (myNodeClick.value) {
        myNodeClick.value.handleNodeClick(currentItem.value);
        console.log('已切换到新数据:', currentItem.value); // 打印当前项以验证
      }
    });
  };
  function switchData(direction) {
    // 在 nextTick 外计算新索引
    videoBojct.value = {};
    let newIndex = currentIndex.value + direction;

    // 使用 nextTick 等待 DOM 更新
    nextTick(() => {
      // 检查新索引是否在有效范围内
      console.log('videoBoj.value:', videoBoj.value);
      if (newIndex >= 0 && newIndex < videoBoj.value.length) {
        currentIndex.value = newIndex; // 更新索引
        videoBojct.value = currentItem.value;
        if (myNodeClick.value) {
          myNodeClick.value.handleNodeClick(videoBojct.value);
        }
        // console.log('已切换到新数据:', currentItem.value); // 打印当前项以验证
      } else {
        // 处理边界情况，例如禁用按钮或显示提示
        console.log('已到达列表的开始或结束');
      }
    });
  }
  function switchTab(tab, index) {
    activeIndex.value = index;
    console.log('props', props.groupType, tab);
    devicePointDetail(tab);
  }
  nextTick(() => {
    getBusVideo();
    // 这段代码将在 onMounted 之后，DOM 更新之后执行
  });
  onMounted(() => {
    // getDevicePointAttr();
  });
  defineExpose({
    devicePointDetail
  });
  // 确保在组件卸载时销毁图表实例
  onUnmounted(() => {});
</script>

<style lang="scss" scoped>
  .mont-right {
    width: 360px;
    position: absolute;
    top: 154px;
    right: 387px;
    z-index: 999;
    .eq-right-top {
      width: 100%;
      // margin-top: 15px;
      .eq-right-top-title {
        width: 100%;
        height: 33px;
        background: rgba(10, 39, 82, 1);
        display: flex;
        align-items: center;
        color: #fff;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        img {
          width: 20px;
          height: 21px;
          margin: 0 5px 0 10px;
        }
      }
      .eq-right-top-item {
        height: 73vh;
        width: 100%;
        background: rgba(5, 30, 67, 0.6);
        // padding-bottom: 13px;

        .tab-switcher {
          width: 327px;
          margin: 0 auto;
          .tab-swit-box {
            width: 327px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
              width: 7%;
              display: block;
              width: 12.4px;
              height: 13.6px;
              cursor: pointer;
              &:hover {
                opacity: 0.95;
              }
            }
            .tab-headers {
              width: 86%;
              height: 32px;
              // padding: 0 10px;
              // padding-right: 10px;
              background: #000000;
              border: 1px solid rgba(105, 221, 254, 0.5);
              border-radius: 4px;
              // background-image: url('../../../assets/images/home-page/info-bg.png');
              // background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              overflow-x: scroll;
              overflow-y: hidden;
              .button {
                cursor: pointer;
                // width: 164px;
                height: 32px;
                font-family: PingFang SC;
                font-size: 12px;
                color: #ffffff;
                text-shadow: 0px 2px 3px #006767;
                white-space: nowrap;
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                // margin-top: 7px;
                &.active {
                  background-image: url('../../../assets/images/home-page/info-tab.png');
                  background-size: 100% 100%;
                }

                &:hover {
                  opacity: 0.95;
                }
              }
              &::-webkit-scrollbar-track {
                background-color: #000000; // 轨道颜色
              }

              // 滚动条滑块
              &::-webkit-scrollbar-thumb {
                background-color: rgba(181, 233, 255, 0.4); // 滑块颜色
                border: 1px solid transparent; // 边框设置为透明，增加滑块的尺寸
                border-width: 3px 0; // 边框只应用到上下，使滑块更细
                background-clip: content-box; // 使背景应用于边框内
                border-radius: 5px; // 滑块圆角
              }

              // 滚动条尺寸
              &::-webkit-scrollbar {
                width: 5px; // 滚动条宽度今日告警次数
                height: 8px; // 滚动条高度
              }
            }
          }
          .tab-i-btn-box {
            width: 96%;
            display: flex;
            justify-content: space-between;
            margin: 15px auto 0 auto;
            .tab-i-btn {
              width: 80px;
              height: 30px;
              background-image: url('../../../assets/images/home-page/tubiao-bg.png');
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-family: PingFang SC;
              font-size: 12px;
              color: #ffffff;
              // margin: 10px auto 0 auto;
              cursor: pointer;
              &:hover {
                opacity: 0.95;
              }
            }
          }

          .tab-content {
            width: 98%;
            height: 30vh;
            background-color: rgba(5, 30, 67, 0.65);
            margin: 6px auto 0 auto;
            border: 1px solid #1f4996;
            .tab-i-content {
              width: 100%;
              height: 80%;
              overflow-y: scroll;
              .tab-i-c-box:nth-child(2n) {
                background-color: rgba(33, 66, 124, 0.6);
              }
              .tab-i-c-box {
                width: 100%;
                display: flex;
                align-items: center;
                height: 36px;
                background-color: rgba(10, 138, 206, 0.6);
                .tab-lab {
                  width: 40%;
                  font-family: PingFang SC;
                  font-size: 16px;
                  color: rgba(255, 255, 255, 0.8);
                  margin-left: 5px;
                  font-size: 12px;
                }
                .tab-value {
                  width: 60%;
                  font-family: PingFang SC;
                  font-size: 16px;
                  color: #ffffff;
                  font-size: 12px;
                }
              }
              // padding: 20px;
              // border: 1px solid #ccc;
              // display: none;
            }
          }
        }
        .mont-right-bottom {
          width: 100%;
          margin: 0 auto;

          .i-r-b-box {
            .eq-r-t-i-title {
              display: flex;
              align-items: center;
              padding-top: 10px;
              .eq-dio {
                width: 8px;
                height: 8px;
                background: #19db3c;
                border-radius: 50%;
                margin-left: 20px;
              }
              .eq-d-title {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 14px;
                color: #ffffff;
                text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5);
                margin-left: 5px;
              }
            }
            .tab-i-btn-box {
              width: 324px;
              display: flex;
              justify-content: space-between;
              margin: 0 auto;
              .tab-i-btn {
                width: 80px;
                height: 30px;
                background-image: url('../../../assets/images/home-page/tubiao-bg.png');
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: PingFang SC;
                font-size: 12px;
                color: #ffffff;
                // margin: 10px auto 0 auto;
                cursor: pointer;
                &:hover {
                  opacity: 0.95;
                }
              }
            }
            .tab-headers {
              width: 337px;
              height: 32px;
              padding: 0 10px;
              margin: 0 auto;
              background-image: url('../../../assets/images/home-page/info-bg.png');
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: space-around;
              color: #ffffff;
              img {
                display: block;
                width: 12.4px;
                height: 13.6px;
                cursor: pointer;
                &:hover {
                  opacity: 0.95;
                }
              }
              .buttons {
                cursor: pointer;
                // width: 64px;
                height: 100%;
                font-family: PingFang SC;
                font-size: 12px;
                color: #ffffff;
                text-shadow: 0px 2px 3px #006767;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                // &.active {
                //   background-image: url('../../../assets/images/home-page/info-tab.png');
                //   background-size: 100% 100%;
                // }

                // &:hover {
                //   opacity: 0.95;
                // }
              }
            }
            .video-box {
              width: 327px;
              height: 216px;
              margin: 0 auto;
              background-image: url('../../../assets/images/home-page/video-bg.png');
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
</style>
